<template>
    <div class="footer">
      <p v-for="(item, index) in navList" :key="index" class="item"
         :class="item.id===now?'active':''"
         @click="toggleNav(item.id, item.path)">
        <img :src="item.id===now ? item.iconSelected : item.icon" alt="">
        <span>{{item.name}}</span>
      </p>
    </div>
</template>

<script>
export default {
  name: 'bottom-nav',
  props: ['tabIndex'],
  data(){
    return {
      now: 0,
      navList: [
        {
          id: 0,
          name: '分类',
          icon: require('../../static/images/ihome.png'),
          iconSelected: require('../../static/images/ihome_select.png'),
          path: 'home'
        },
        {
          id: 1,
          name: '个人',
          icon: require('../../static/images/imine.png'),
          iconSelected: require('../../static/images/imine_select.png'),
          path: 'mine'
        }
      ]
    }
  },
  methods: {
    toggleNav(id, path){
      if(id !== this.now){
        this.now = id;
        this.$router.push(path);
      }
    }
  },
  mounted(){
    this.now = this.tabIndex;

  }
}
</script>

<style scoped>
.item{
  float: left;
  width: 50%;
  text-align: center;
  padding-top: .1rem;
}
.item img{
  display: block;
  margin: 0 auto;
  width: .6rem;
}
.item span{
  font-size: .4rem;
  color: #333;
  display: block;
  line-height: .6rem;
}
.item.active span{
  color: #f00;
}
</style>
